<template>
	<view>
		<view class="container">
			<view class="banner">
				<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true"
				 :autoplay="true">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
						<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
					</swiper-item>
				</swiper>
			</view>

			<view class="desc margin-top">
				<view class="desc-content bg-white padding radius-xl">
					<view class="top margin-bottom-sm">
						<view class="name" style="width: 100%;justify-content: space-between">
							<text class="text-xl text-bold text-black">{{ projectDetail.name }}</text>
							<view class="cu-tag sm round margin-left" @click="addFans()">
								<text :class="['padding-right-mn text-red', isFan ? 'cuIcon-favorfill' : 'cuIcon-favor']"></text> {{ projectDetail.goodsCollects.length }}
							</view>
						</view>
					</view>
					<view class="text-sm text-gray">
            <view class="distance">
              <view class="text-red">
                <text class="text-sm">¥</text>
                <text class="text-right padding-left-mn money">{{ projectDetail.price }}{{ projectDetail.unit }}</text>
              </view>
            </view>
						<view class="">
							<text class="padding-right-mn"></text> 服务时长：{{ projectDetail.duration ? projectDetail.duration + '分钟' : '已实际时间为主' }}
						</view>
						<text>超 <text style="color: #ff9900;font-size: 32rpx"> {{ projectDetail.sale_count }} </text>人选择</text>
					</view>
					<view class="buttom text-sm text-gray">
						<text>{{ projectDetail.description }}</text>
					</view>
				</view>
			</view>

			<view class="navaction padding" style="padding-bottom: 150rpx">
				<view class="bg-white radius-xl padding-top">
					<view class="grid col-3 padding-sm text-center">
						<view :class="navTbale==index?'active':''" v-for="(item,index) in navList" :key="index" @click="changeNavTab(index)">
							{{item}}
						</view>
					</view>
					<view class="padding project-info" v-if="navTbale == 0">
            <u-parse :html="projectDetail.content"></u-parse>
					</view>

					<view class="padding-lr padding-tb-sm comment" v-if="navTbale == 1">
						<view class="item margin-bottom" v-for="(item,index) in comment" :key="index"
						:class="comment.length - 1 != index ? 'solid-bottom' :''">
							<view class="top crow">
								<image :src="item.anony === 1 ? item.member.avatar : 'https://shop-1326774597.cos.ap-guangzhou.myqcloud.com/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F.png'" mode="" class="avatar round"></image>
								<view class="right margin-left-sm">
									<view class="nickname crow space-between">
										<view class="text-black">
                      <text class="value">{{item.anony === 1 ? item.member.nickname : '匿名用户'}}</text>
										</view>

										<view class="time text-sm">
											<text>{{item.create_time }}</text>
										</view>
									</view>
									<view class="">
										<u-rate :count="5" :value="item.score" readonly></u-rate>
									</view>
								</view>
							</view>
							<view class="content text-sm margin-top-xs">
								<text>{{item.comment || ''}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<Loading v-if="pageLoading"/>

    <!-- 底部预约按钮 -->
    <view class="bottom-bar">
      <button class="order-btn" @click="toOrder">立即预约</button>
    </view>
	</view>
</template>

<script>
	import PartnersList from './partnerList.vue'
	export default {
    components: {
      PartnersList
    },
		data() {
			return {
				pageLoading:true,
				swiperList:[
				],
				navList:['项目介绍','用户评价'],
				navTbale:0,
				partnerList:[],
				projectId:0,
        projectDetail: {
          goodsCollects: []
        },
        isFan: false,
				comment:[

				],
        userInfo: {}
			}
		},
		onLoad(options) {
      this.userInfo = uni.getStorageSync('userInfo') || {}
			this.projectId = options.projectId || options.goodsId;
      this.getDetail()
      this.$http.getProjectCommentList({
        project_id: this.projectId
      }).then(res => {
        this.comment = res
      })
		},
		methods:{
      getDetail() {
        this.$http.getProjectDetail({id:this.projectId}).then(res=>{
          this.projectDetail = res || {};
          this.projectDetail.sale_count = this.projectDetail.sale_count || this.projectDetail.orderDetails.length
          this.swiperList.push({
            url: res.image,
            type:'image'
          })
          this.pageLoading = false;
          if (this.userInfo.id) {
            this.isFan = !!this.projectDetail.goodsCollects.find(item => item.member_id === this.userInfo.id)
          }
        })
      },
			changeNavTab(index){
				this.navTbale = index;
			},
      addFans() {
        if (!this.userInfo.id) {
          uni.showModal({
            title: '提示',
            content: '是否前往登录?',
            success: (res) => {
              if (res.confirm) {
                this.toUrl('/pages/login/login')
              }
            }
          })
          return
        }
        if (this.isFan) {
          let delItem = this.projectDetail.goodsCollects.find(item => item.member_id === this.userInfo.id).id
          if (!delItem) return
          let delId = delItem.id
          this.$http.delProjectCollect(delId).then(res => {
            this.isFan = false
            this.getDetail()
          })
        } else {
          this.$http.createProjectCollect({
            member_id: this.userInfo.id,
            project_id: this.projectDetail.id
          }).then(res => {
            this.isFan = !this.isFan
            uni.showToast({
              title: this.isFan ? '收藏成功' : '取消收藏',
              icon: 'none'
            })
            this.getDetail()
          })
        }
      },
      toOrder() {
        const projects = JSON.stringify([{ id: this.projectDetail.id, num: 1 }])
        this.toUrl('/pages/order/confirm?projects='+projects,true);
      }
		}
	}
</script>

<style lang="less" scoped>
.banner{
	border-bottom-left-radius: 55upx;
	border-bottom-right-radius: 55upx;
	overflow: hidden;
	height: 400rpx;
	.screen-swiper{
		height: 400rpx;
	}
}
.project-info{
	image{
		width: 100%;
	}
}
.navaction{
	.active{
		color: black;
		font-weight: bold;
	}
}
.desc{
	.auth{
		border-top-left-radius: 15upx;
		border-top-right-radius: 15upx;
		width: 85%;
		margin: auto;
	}

	.desc-content{
		width: 93%;
		margin: auto;
		line-height: 45upx;
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.name{
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.distance{
				.money{
					font-size: 40upx;
				}
			}
		}
		.center{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}
.partner-list{
	.item{
		height: 200upx;
		.avatar{
			position: relative;
			width: 170upx;
			height: 170upx;
			display: flex;
			align-items: center;
			.img{
				width: 130upx;
				height: 130upx;
				border-radius: 50%;
			}
			.title-img{
				width: 180upx;
				height: 180upx;
				position: absolute;
				left: -20rpx;
			}
		}
		.right{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 150upx;
			.top{
				.status{
					border: 2rpx solid #0ab27d;
					font-size: 20rpx;
					.zuizao{
						background-color: #0ab27d;
						padding: 5rpx;
						border-top-right-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
						color: white;
					}
					.time{
						padding: 5rpx;
					}
				}
			}
		}
	}
}
.liji{
	button{
		background: var(--theme-bg-color);
		color: white;
	}
}
.comment{
	.item{
		min-height: 130rpx;
		.top{
			.avatar{
				height: 70rpx;
				width: 70rpx;
			}
			.right{
				flex: 1;
				.nickname{
					.value{
						padding-left: 5rpx;
					}
				}
			}
		}
		.content{
			padding-bottom: 15rpx;
		}
	}
}
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 -2rpx 8rpx #f0f0f0;
  padding: 12rpx 0 24rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.order-btn {
  width: 80%;
  height: 88rpx;
  background: linear-gradient(90deg, #ff6600 60%, #ff9900 100%);
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  border: none;
  border-radius: 22rpx;
  padding: 0;
  box-shadow: 0 2rpx 8rpx #ff660044;
  line-height: 88rpx;
  text-align: center;
}
</style>
